<template>
    <div class="flex w-full mb-2 justify-center">
        <div class="h-12 w-64 bg-transparent relative flexbox">
        <div class="absolute top-0 h-12 w-full flex justify-start">
            <div
                v-for="index in 4"
                :key="index"
                class="mx-2 text-center font-bold text-3xl border-2 rounded-lg h-12 w-12"
                style="line-height: 45px;"
                :class="{'code_item_active': (index == codeValue.length) || (codeValue.length == 4 && index == 4) && inputFocus}"
            >
                {{ codeValue[index-1] }}
            </div>
        </div>
        <input
            ref="textInput"
            type="text"
            class="absolute top-0 left-0 w-full h-full bg-transparent text-[transparent]"
            style="letter-spacing: -30px; text-indent: -100px;"
            v-model="codeValue"
            :maxlength="4"
            @change="codeChange"
            @click="moveCursorToEnd"
        >
        </input>
        </div>
    </div>
  </template>
  
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      inputFocus: true,
      codeValue: '',
    };
  },
  methods: {
      // 校验输入的验证码/密码
      codeChange() {
        this.$emit("confirm",this.codeValue);
      },
      moveCursorToEnd() {
        const input = this.$refs.textInput as HTMLInputElement;
        input.selectionStart = input.selectionEnd = input.value.length;
      },
  }
});
</script>
  
<style scoped>

.code_item_active {
  border: 2px solid #269af2 !important;
  z-index: auto;
}

</style>
  